<template>
    <osc-navpage
            class="personal-root"
            title="采购单详情"
            height="100"
            titleColor="#000"
            backgroundColor="#eff3f2"
            leftItemSrc="https://github.com/osmartian/weex-frame/blob/master/src/views/personal/imgs/common_goback.png?raw=true"
            @naviBarLeftItemClick="naviBarLeftItemClick">

        <div class="head">
            <div class="tittle">
                <text class="text-tittle">基本资料</text>
            </div>
            <div class="panel">
                <text class="text">供应商:{{supply}}</text>
            </div>
            <div class="panel">
                <text class="text">要求到货日期:{{date}}</text>
            </div>
            <div class="panel">
                <text class="text">备注:</text>
                <input ref="input" class="input" type="text" name="memo"></input>
            </div>
        </div>

        <div class="body">

            <div class="tittle">
                <text class="text-tittle">采购单原料</text>
            </div>

            <list class="list">
                <cell class="cell" v-for="purchaseDetail in lists">

                    <div class="cell-head">
                        <text class="text-system">原料:</text>
                        <text class="text">{{purchaseDetail.goodsName}}</text>
                    </div>

                    <div class="cell-bottom">
                        <text class="text-system">数量:</text>
                        <text class="text">{{purchaseDetail.num}}</text>
                        <text class="text">{{purchaseDetail.unit}}</text>
                    </div>

                </cell>

                <!-- <cell class="cell-add" @click="addPaperGoods">
                  <div class="add">
                    <image class="img" src="https://olwr1lamu.qnssl.com/%E6%B7%BB%E5%8A%A0.png" ></image>
                    <text class="text-add">添加采购原料……</text>
                  </div>
                </cell> -->

            </list>

            <div v-if="power == '0'">
                <div class="btn">
                    <text class="text-save">请等待总部确认~</text>
                </div>
            </div>
            <div v-else>
                <div v-if="status == '0'" class="btn" @click="send">
                    <text class="text-save">确认采购</text>
                </div>

                <div v-if="status == '1'" class="btn2">
                    <text class="text-save">已审核</text>
                </div>
            </div>
        </div>
    </osc-navpage>
</template>

<script>
    import route from 'router/page'
    import mixins from 'mixins'

    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    const stream = weex.requireModule('stream')

    export default {
        data () {
            return {
                power: '',
                status: '',
                purchaseInfoId: '',
                refreshing: false,
                id4detail: '',
                supply: '',
                date: '',
                lists: []
            }
        },
        mixins: [mixins],
        methods: {

            naviBarLeftItemClick () {
                this.router.pop()
            },
            onrefresh (event) {
                modal.toast({message: '刷新中', duration: 1})
                this.refreshing = true
                setTimeout(() => {
                    this.refreshing = false
                }, 200)
            },
            supplyInput(event) {
                this.supply = event.value
            },
            dateInput(event) {
                this.date = event.value
            },
            send() {
                stream.fetch({
                    method: 'GET',
                    type: 'json',
                    url: this.imgUrl.collect.computerUrl + 'sendPurchaseInfo?id=' + this.purchaseInfoId
                }, callback => {
                    modal.toast({message: '发货成功', duration: 1})
                    this.router.pop()
                })
            },
            onclick (item) {
                // 跳转到添加页面
                this.router.push({
                    page: this.routerPage.addPurchaseDetail
                })
            }
        },
        created () {

            storage.getItem('power', event => {
              this.power = event.data
            })

            storage.getItem('id4detail', event => {

                const purchaseInfoid = event.data

                stream.fetch({
                    method: 'GET',
                    type: 'json',
                    url: this.imgUrl.collect.computerUrl + 'getPurchaseDetailById?id=' + purchaseInfoid
                }, callback => {
                    this.lists = callback.data.purchaseDetailVoList
                    this.supply = callback.data.supply
                    this.date = callback.data.date
                    this.status = callback.data.status
                    this.purchaseInfoId = callback.data.id
                })

            })
        }
    }
</script>

<style>
    .btn {
        justify-content: center;
        align-items: center;
        height: 90px;
        width: 350px;
        background-color: #FF0000;
        border: 2px solid;
        border-radius: 10px;
        margin-top: 50px;
        margin-left: 200px;
    }

    .btn2 {
        justify-content: center;
        align-items: center;
        height: 90px;
        width: 350px;
        background-color: #00CC00;
        border: 2px solid;
        border-radius: 10px;
        margin-top: 50px;
        margin-left: 200px;
    }

    .add {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .text {
        margin-left: 10px;
        flex-direction: row;
        font-size: 42px;
        color: #41B883;
    }

    .tittle {
        height: 100px;
        border-width: 2px;
        border-style: solid;
        border-color: #DDDDDD;
        background-color: #669999;
    }

    .text-save {
        flex-direction: row;
        font-size: 50px;
        color: #ffffff;
    }

    .text-tittle {
        margin-left: 10px;
        padding-top: 20px;
        flex-direction: row;
        font-size: 50px;
    }

    .panel {
        padding-top: 20px;
        width: 750px;
        height: 100px;
        flex-direction: row;
        border-width: 2px;
        border-style: solid;
        border-color: #DDDDDD;
        background-color: #F5F5F5;
    }

    .cell {
        padding-top: 50px;
        padding-left: 30px;
        flex-direction: row;
        width: 750px;
        height: 170px;
        border-width: 2px;
        border-style: solid;
        border-color: #DDDDDD;
        background-color: #F5F5F5;
    }

    .cell-bottom {
        margin-left: 150px;
        flex-direction: row;
    }

    .cell-head {
        flex-direction: row;
    }

    .cell-add {
        justify-content: center;
        align-items: center;
        width: 750px;
        height: 170px;
        border-width: 2px;
        border-style: solid;
        border-color: #DDDDDD;
        background-color: #F5F5F5;
    }

    .text-add {
        color: #CC0000;
        font-size: 40px;
    }

    .text-system {
        flex-direction: row;
        font-size: 42px;
        color: #000000;
    }

    .img {
        width: 60px;
        height: 60px;
        opacity: 0.7;
    }

    .input {
        width: 300px;
        height: 55px;
    }
</style>

